window.onload = () => {
  function debounce(fn, wait) {
        // 定义一个定时器的变量【容器】
        var timer = null;
        // 此函数的返回值是一个函数
        return function () {
            // 定义当前this指向
            var context = this;
            //定义当前函数的参数
            var args = arguments;
            // 如果定时器当前已经被赋值 则清空次定时器
            if (timer) {
                // 每次执行让定时器清空
                clearTimeout(timer);
                timer = null;
            }
            // 每次执行此函数的时候 让它延迟执行 wait
            timer = setTimeout(function () {
                // 改变this指向
                // 这里this指向是 谁调用return出来的函数 this就指向谁
                // args 传递参数
                fn.apply(context, args)
            }, wait)
        }
    }
  function throttle(fn, time) {
        // 定义一个保留时间的变量 初始值为0
        let start = 0;
        return function (e) {
            // 获取到当前的时间 单位是毫秒
            let terminal = new Date().getTime();
            /*
            * 第一次初始值为0 会执行一次 并且保留执行时的时间值
            * 当此函数第二次执行的时候 由于时间不是一个定值 这时重新产生一个当前时间值
            * 当前执行的时间值减去上次执行的时间值 如果不大于等于自定义的时间【time】
            * 则不会执行此函数 直到动态变化的时间减去上次执行的时间大于自定义的时间值【time】时才会再次触发此函数的执行
            * */
            if (terminal - start >= time) {
                // 向调用方传递参数
                fn.call(this, e);
                // 每次执行时重新给start赋值为当前点击的时间
                start = terminal
            }
        }
    }
  function creation (msg, color, backgroundColor) {
        let div = document.createElement('div');
        div.className = 'container--item__msg';
        div.classList.add('animated');
        div.classList.add('fadeOutUp');
        div.style.animationDuration = '3s';
        div.innerHTML = msg;
        div.style.backgroundColor = backgroundColor;
        div.style.color = color;
        document.body.appendChild(div)
    }
  let codeSet = null;
  let translate = document.getElementsByClassName('container--translate')[0];
  let box = document.getElementsByClassName('container')[0];
  let cont = document.getElementsByClassName('container--mask__cont')[0];
  let startLanding = document.getElementsByClassName('container--item__immediately')[0];
  let mack = document.getElementsByClassName('container--item__mask')[0];
  let shut = document.getElementsByClassName('container--mask__img')[0];
  let getCode = document.getElementsByClassName('container--mask__getCode')[0];
  let tell = document.getElementsByClassName('container--mask__tell')[0];
  let code = document.getElementsByClassName('container--mask__code')[0];
  let landing = document.getElementsByClassName('container--mask__register')[0];
  startLanding.addEventListener('click', function (event) {
      event.stopPropagation();
      cont.classList.add('bounceIn');
      mack.style.display = 'block'
  });
  mack.addEventListener('click', function (e) {
      let label = e.target;
      if (label === shut || label === mack) {
          cont.classList.remove('bounceIn');
          cont.classList.add('bounceOut');
          setTimeout(() => {
              this.style.display = 'none';
              tell.value = '';
              code.value = '';
              // getCode.style.backgroundColor = '#06bf04';
              // getCode.innerHTML = '获取验证码';
              // codeSet = null;
              cont.classList.remove('bounceOut')
          },800)
      }
  });
  tell.addEventListener('input', debounce( function () {
      if (this.value.length === 11) {
          let value = this.value;
          getCode.style.backgroundColor = '#06bf04';
          getCode.addEventListener('click', throttle( function () {
              $.ajax({
                  method: 'get',
                  url: 'http://localhost:8080/landing',
                  data: { value },
                  success: (data) => {
                      console.log(data);
                      if (data.code === 1) {
                          creation(data.msg, '#fff', '#06bf04');
                          let num = 60;
                          codeSet = null;
                          codeSet = setInterval( () => {
                              num --;
                              this.innerHTML = '等待' + num + '秒';
                              this.style.backgroundColor = '#dddddd';
                              if (num === 0) {
                                  this.innerHTML = '获取验证码';
                                  this.style.backgroundColor = '#06bf04';
                                  clearInterval(codeSet);
                              }
                          },1000);
                      }
                      data.code === -1 ? creation('请检查网络或手机号', '#fff', '#BF4A3D') : '';
                  },
                  fail: (e) => { console.log(e); }
              })
          },1000 * 60))
      }else {
          getCode.style.backgroundColor = '#dddddd';
      }
  },300));
  landing.addEventListener('click', throttle(function () {
      let numCode = code.value;
      $.ajax({
          method: 'get',
          url: 'http://localhost:8080/page',
          data:{ numCode },
          success: (data) => {
              console.log(data);
              if (data.code === 1) {
                  creation('恭喜你登陆成功！', '#fff', '#06bf04');
                  clearInterval(codeSet);
                  tell.removeEventListener('input', debounce);
                  landing.removeEventListener('click', debounce);
                  mack.classList.add('bounceOut');
                  tell.value = '';
                  code.value = '';
                  getCode.innerHTML = '获取验证码';
                  getCode.style.backgroundColor = '#dddddd';
                  setTimeout(() => {
                      box.style.display = 'none';
                      translate.style.display = 'block';
                      mack.style.display = 'none';
                      mack.classList.remove('bounceOut')
                  }, 500);
              }
              data.code === -1 ? creation('验证码输错咯！', '#fff', '#BF4A3D') : '';
          },
          fail: (e) => { console.log(e); }
      })
  },500));

    //翻译部分
  let content = document.getElementsByClassName('container--translate__content')[0];
  let show = document.getElementsByClassName('container--translate__show')[0];
  let btn = document.getElementById('container--translate__btn');
    content.addEventListener('input', debounce(function () {

    },500));
    btn.addEventListener('click', debounce(function () {
        let value = content.value;
        $.ajax({
            method: 'post',
            url: 'http://localhost:8080/translate',
            data: {
                value
            },
            success: (data => {
                console.log(data);
                show.innerHTML = data.data.reverse()[0].english
            }),
            fail: (error => {console.log(error)})
        })
    },500))
};
